<script lang="ts" setup>
import CardBase from './Card/CardBase.vue'
import type { ProductList } from '~/types/api'

interface IProps {
  title?: string  // 标题
  subTitles?: string[] // 介绍
  choiceCard: number  // 控制卡片是否展示详情介绍
  cards: ProductList[]  // 课程详情
}
defineProps<IProps>()

</script>

<template>
  <div w-full>
    <!-- 标题和图标 -->
    <div flex items-center v-if="title">
      <div flex items-end>
        <cdn-img src="/images/icon_hot.png" h-29px w-29px mr-5px />
        <h2 text-16px text="#4f555d">{{ title }}</h2>
      </div>
      <div ml-48px flexc text-14px v-for="item in subTitles" mr-40px pt-3px>
        {{ item }}
      </div>
    </div>
    <!-- 卡片列表和右侧模块 -->
    <div flex items-center class="cards-bg">
      <div class="cards" mt-12px flex="~ wrap gap-24px">
        <CardBase v-for="(item, index) in cards" :card="item" :key="index" :choice-card="choiceCard" />
      </div>
      <div>
        <slot />
      </div>
    </div>
  </div>
</template>